import React from 'react';
import 'antd/dist/antd.css';
import {
  BrowserRouter as Router,
  Link
} from "react-router-dom";
import {router} from "./study1/router";
import {
  PieChartOutlined,
  MailOutlined,
} from '@ant-design/icons';
import {Menu} from "antd";

const { SubMenu } = Menu;



function App() {
  return (
    <div style={{ width: 256 }}>
      <Router>
        <Menu
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode="inline"
            theme="dark"
        >
          {
            router.map((r,i)=>{
              if (r.childern){
                return (
                    <Menu.Item key={r.id} icon={<PieChartOutlined />} >
                      <Link to={r.path}>{r.title}</Link>
                    </Menu.Item>
                )
              }else {
                return (
                    <SubMenu key={r.id} icon={<MailOutlined />} title={r.title}>
                      <Menu.Item key="5">
                        <Link to={r.path}>{r.title}</Link>
                      </Menu.Item>
                    </SubMenu>
                )
              }
            })
          }
        </Menu>
        {/*{*/}
        {/*  router.map((r,index)=>{*/}
        {/*    if (r.childern){*/}
        {/*      return (*/}
        {/*          <Switch key={r.id}>*/}
        {/*            {*/}
        {/*              router.map((r1,index)=>{*/}
        {/*                <Route path={r1.path} exact={r1.exact} key={r1.id}>*/}
        {/*                  {r1.component}*/}
        {/*                </Route>*/}
        {/*              })*/}
        {/*            }*/}
        {/*          </Switch>*/}
        {/*      )*/}
        {/*    }else {*/}
        {/*      return (*/}
        {/*          <Route path={r.path} exact={r.exact} key={r.id}>*/}
        {/*            {r.component}*/}
        {/*          </Route>*/}
        {/*      )*/}
        {/*    }*/}
        {/*  })*/}
        {/*}*/}
      </Router>
    </div>
  );
}

export default App;
